<template>
  <div class="operation-log-container">
    <t-card title="操作日志" subtitle="系统操作记录" class="log-card">
      <template #actions>
        <t-button @click="fetchLogData" :loading="loading">刷新</t-button>
      </template>
      
      <!-- 表格区域 -->
      <t-loading :loading="loading">
        <t-table
          :data="tableData"
          :columns="columns"
          row-key="id"
          size="medium"
          hover
          table-layout="fixed"
          :pagination="pagination"
          bordered
          @page-change="onPageChange"
        />
      </t-loading>
    </t-card>
  </div>
</template>

<script>
import { MessagePlugin } from 'tdesign-vue';
import { getLog } from '@/service/menu';

export default {
  name: 'OperationLog',
  data() {
    return {
      loading: false,
      tableData: [],
      
      // 表格列配置
      columns: [
        {
          colKey: 'id',
          title: '日志ID',
          width: 80,
        },
        {
          colKey: 'username',
          title: '操作人',
          width: 120,
        },
        {
          colKey: 'operation',
          title: '操作类型',
          width: 140,
        },
        {
          colKey: 'time',
          title: '操作时间',
          width: 80,
        },
        {
          colKey: 'createTime',
          title: '创建时间',
          width: 160,
        },
        {
          colKey: 'ip',
          title: '操作IP',
          width: 120,
        },
        {
          colKey: 'location',
          title: '操作位置',
          width: 140,
        },
        {
          colKey: 'method',
          title: '请求方法',
          width: 200,
        },
        {
          colKey: 'params',
          title: '请求参数',
          ellipsis: true,
        }
      ],
      
      // 分页配置
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 50],
        showTotal: true,
      }
    };
  },
  
  mounted() {
    this.fetchLogData();
  },
  
  methods: {
    // 获取日志数据
    async fetchLogData() {
      this.loading = true;
      try {
        // 构建查询参数
        const params = {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          sortField:'createTime',
          sortOrder:'asc'//降序/asc升序
        };
        
        const res = await getLog(params);
        console.log('日志数据:', res);
        
        if (res && res.data) {
          this.tableData = res.data.records || [];
          this.pagination.total = res.data.total || 0;
        } else {
          this.tableData = [];
          this.pagination.total = 0;
        }
      } catch (error) {
        console.error('获取日志数据失败', error);
        MessagePlugin.error('获取日志数据失败');
        this.tableData = [];
        this.pagination.total = 0;
      } finally {
        this.loading = false;
      }
    },
    
    // 分页变化
    onPageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.fetchLogData();
    }
  }
};
</script>

<style lang="less" scoped>
.operation-log-container {
  padding: 20px;
}
</style>
